<template>
  <div class="classify">
    <div class="top">
      <router-link to="" @click.native="fanHui()">&lt;</router-link>
      <div class="top_title">分类</div>
    </div>

    <div class="denglu_anniu" v-if="login==null">
      <span>登录查看更多</span>
      <router-link to="/Login">
        立即登录
      </router-link>
    </div>

    <!-- 搜索框 -->
    <div class="search">
      <router-link to="/Sousuo">
        <input type="text">
        <img src="../../public/picture/sousuo/sousuo.svg" alt="">
        <span>搜索</span>
      </router-link>
    </div>
    <div class="fl_flowr">
      <ul class="flowr_title">
        <li :class="item[0].class" v-for="(item,index) in da_sj" :key="index">
          <router-link to="/Csyjp" @click.native="fenleiShop(index)">
            <div class="hua_ming" v-show="item[0].class=='title_left'">
              <p>{{item[0].title1}}</p>
              <p>{{item[0].title2}}</p>
            </div>
            <div>
              <img :src="item[0].img" alt="">
            </div>
            <div class="hua_ming"  v-show="item[0].class!='title_left'">
              <p>{{item[0].title1}}</p>
              <p>{{item[0].title2}}</p>
            </div>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

import bus from '@/bus.js';

export default {
  data(){
    return {
      login:null,
      every:'',
      da_sj:{
      }
      
    
}
    
  },
  methods:{
    fanHui(){
      window.history.go(-1)
    },
    fenleiShop(ming){
      this.every=this.da_sj[ming][0].list
      localStorage.setItem('every1',JSON.stringify(this.every));
    }
  },
  mounted(){
    this.$axios.get('http://47.114.130.21:3000/classify').then((data)=>{
      this.da_sj=JSON.parse(data.data[0].da_sj)
    })
    this.login=localStorage.getItem('id');
  }
}
</script>

<style lang="less" scoped>
  .classify{
    margin-bottom: 50px;
    .search{
      margin-top: 45px;
      width: 100%;
      height: 1.44rem;
      background: url('../../public/picture/classfeilei/ss.jpg') no-repeat center center;
      background-size: cover;
      display: flex;
      flex: 1;
      justify-content: center;
      align-items: center;
      >a{
        display: block;
        height: 0.8rem;
        width: 80%;
        position: relative;
        input{
          width: 100%;
          height: 100%;
          outline: none;
          border-radius: 5px;
          border: 1px solid #c20430;
          padding-left: 0.72rem;
        }
        img{
          position: absolute;
          width: 0.533333rem;
          left: 0.133333rem;
          top: 50%;
          transform: translateY(-50%);
        }
        span{
          height: 100%;
          background: #C20430;
          width: 1.866667rem;
          position: absolute;
          right: 0px;
          top: 0px;
          color: #ffffff;
          text-align: center;
          line-height: 0.8rem;   
          border-top-right-radius: 5px;
          border-bottom-right-radius: 5px;
        }
      }
    }
    .fl_flowr{
      width: 100%;
      .flowr_title{
        width: 100%;
        display: flex;
        flex: 1;
        flex-flow: column;
        >li{
          height: 3.8rem;
          width: 100%;
          background: #ffffff;
          margin-top: 0.133333rem;
          >a{
            height: 100%;
            width: 100%;
            display: flex;
            flex: 1;
            flex-flow: row;
            div{
              display: inline-block;
              text-align: center;
              width: 50%;
              >p:nth-child(1){
                font-size: 16px;
                color: #353535;
              }
              >p:nth-child(2){
                font-size: 14px;
                color:#de0a2b;
              }
              img{
                height: 100%;
              }
            }
            .hua_ming{
              display: flex;
              justify-content: center;
              align-items: center;
              flex: 1;
              flex-flow: column;
            }
          }
        }
      }
    }

  .denglu_anniu{
    padding: 0px 0.533333rem;
    display: flex;
    z-index: 999;
    position: fixed;
    bottom: 50px;
    width: 100%;
    height: 1.066667rem;
    background: rgba(0, 0,0, 0.5);
    justify-content: space-between;
    align-items: center;
    >span{
      color: #ffffff;
    }
    >a{
      display: block;
      height:0.666667rem;
      background: #FF734C;
      line-height: 0.666667rem;
      color: #ffffff;
      text-align: center;
      width: 2.133333rem;
      border-radius: 30px;
    }
  }

  }
</style>
